<!-- 基础：2、Vue实例 属性与方法 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：2、Vue实例 属性与方法</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<p>{{ a }}</p>
		
	</div>

	<script type="text/javascript">
		var data = { a: 1 }
		console.log(data);
		var vm = new Vue({			
			el: '#app',
			data: data,						
		})

		// $watch是个实例方法
		vm.$watch('a', function(newVal, oldVal){
			// 这个回调将在 vm.a 改变后调用
			console.log('oldVal:'+oldVal+',newVal:'+newVal);
		})		

		// 这里data: data不是简单的赋值关系，而是类似于引用，只要其中一方发生改变，另一方也会改变，因为改变的数据是同一个数据
		console.log(vm.a, data.a);

		if(vm.a === data.a){
			console.log('yes');
		}else{
			console.log('no');
		}

		// 这种属性称之为代理
		// 只有在实例创建时的属性才能被代理，实例创建之后添加的新的属性不会触发视图更新
		vm.a = 2
		console.log(data.a);

		// 这里虽然间接导致vm.a的改变，但是不会导致调用vm.$watch实例方法
		data.a = 3       
		console.log(vm.a);

		data['b'] = 4;
		vm.c = 5;
		console.log(data.b, data.c, vm.b, vm.c);    // 这里显示的是4 undefined undefined 5，说明了数据的代理只在实例创建时有效，后续添加的数据无法代理

		// 如果想要访问实例的属性和方法，需要加$
		if(vm.$el === document.getElementById('app')){
			console.log('equal');
		}else{
			console.log('not equal');
		}


	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->